<script setup>
import { Card ,Button,ButtonGroup, Space} from 'ant-design-vue'
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'
import { usePortalToFollow } from '../portal-to-follow-elem/usePortalToFollow'
import {
  RiEqualizer2Line,RiAccountBox2Fill,RiShutDownFill
} from '@remixicon/vue'

const nodes = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
])
  
const edges = ref([
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
])

const [register,{setOpen}]  = usePortalToFollow()

function handleClose() {
  portalContext.setOpen(false);
}
function handleOk() {
  portalContext.setOpen(false);
}
</script>

<template>
  <div class="fixed inset-0 z-[100] flex justify-end overflow-hidden p-2" style="background-color: rgba(16, 24, 40, 0.20)">
    <div
        class='flex h-full w-[640px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
      >
      <div class='h-full w-full overflow-x-auto'>-
       <VueFlow v-model:nodes="nodes" v-model:edges="edges" class="w-full h-full" style="width: 500px;height:300px" ></VueFlow>
    </div>
    <div class='sticky bottom-0 z-[5] flex w-full justify-end border-t border-divider-regular bg-background-section-burn px-6 py-4'>
        <Space>
          <Button @click="handleClose"class='mr-2'>取消</Button>
          <Button type='primary' @click="handleOk">保存</Button>
        </Space>   
    </div>
    </div>
   
  </div>
 
</template>